<template>
  <div class="common-layout">
    <el-container>
      <el-aside  class="leftNav" :style="{width:(isFold?'64px':'200px')}" style="position: fixed;">
        <div v-show="!isFold" style="color: white;margin:20px 0 0 30px">十方智育-后台管理</div>
        <el-radio-group  v-model="isCollapse" style="margin-bottom: 10px;" >
        </el-radio-group>
        <el-menu
            default-active="5"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            :background-color="'rgba(48, 65, 86)'"
            :text-color="'rgb(255,255,255)'"
        >
          <el-menu-item index="5" @click='router.push("/homepage/home")'>
            <el-icon><House /></el-icon>
            <template #title >首页</template>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Management /></el-icon>
              <span>管理</span>
            </template>

            <el-menu-item index="1-1" @click='router.push("/homepage/user")'>
              <el-icon><UserFilled /></el-icon>
              用户管理
            </el-menu-item>
            <el-sub-menu index="1-2">
              <template #title>               
                <el-icon><Tickets /></el-icon>
                文章管理
              </template>
              <el-menu-item index="1-2-1" @click="router.push('/homepage/article')">
                <el-icon><EditPen /></el-icon>
                文章列表
              </el-menu-item>
              <el-menu-item index="1-2-2" @click="router.push('/homepage/articleType')">
                <el-icon><StarFilled /></el-icon>
                文章分类    
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="1-3">
              <template #title>               
                <el-icon><Pointer /></el-icon>
                咨询师管理
              </template>
              <el-menu-item index="1-3-1" @click="router.push('/homepage/consult')">
                <el-icon><Histogram /></el-icon>
                咨询师信息表
              </el-menu-item>
              <el-menu-item index="1-3-2" @click="router.push('/homepage/consultSpecialty')">
                <el-icon><Basketball /></el-icon>
                咨询师技能表
              </el-menu-item>
              <el-menu-item index="1-3-3" @click="router.push('/homepage/consultDiploma')">
                <el-icon><Memo /></el-icon>
                咨询师证书表
              </el-menu-item>
              <el-menu-item index="1-3-4" @click="router.push('/homepage/charge')">
                <el-icon><Money /></el-icon>
                咨询师费用表
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="1-4">
              <template #title>
                <el-icon><Notebook /></el-icon>
                课程管理
              </template>
              <el-menu-item index="1-4-1" @click="router.push('/homepage/course')">
                <el-icon><Calendar /></el-icon>
                课程表
              </el-menu-item>
              <el-menu-item index="1-4-2" @click="router.push('/homepage/courseLei')">
                <el-icon><Calendar /></el-icon>
                课程分类表
              </el-menu-item>
              <el-menu-item index="1-4-3" @click="router.push('/homepage/courseMark')">
                <el-icon><Medal /></el-icon>
                课程评价表
              </el-menu-item>
              <el-menu-item index="1-4-4" @click="router.push('/homepage/coursecollection')">
                <el-icon><Collection /></el-icon>
                用户收藏表
              </el-menu-item>
              <el-menu-item index="1-4-5" @click="router.push('/homepage/courseTalk')">
                <el-icon><ChatLineSquare /></el-icon>
                课程交流表
              </el-menu-item>
              <el-menu-item index="1-4-6" @click="router.push('/homepage/courseReply')">
                <el-icon><InfoFilled /></el-icon>
                回复信息表
              </el-menu-item>
              <el-menu-item index="1-4-7" @click="router.push('/homepage/coursePurchase')">
                <el-icon><Tickets /></el-icon>
                上课记录表
              </el-menu-item>
            </el-sub-menu>   
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><ChatLineRound /></el-icon>
              <span>咨询与评价</span>
            </template>
            <el-menu-item index="2-1" @click="router.push('/homepage/CA')">
              <el-icon><ChatDotRound /></el-icon>
              咨询预约
            </el-menu-item>
            <el-menu-item index="2-2" @click="router.push('/homepage/UserP')">
              <el-icon><ChatRound /></el-icon>
              用户评价
            </el-menu-item>
            <el-menu-item index="2-3" @click="router.push('/homepage/PM')">
              <el-icon><Printer /></el-icon>
              私信信息
            </el-menu-item>
            <el-menu-item index="2-4" @click="router.push('/homepage/reply')">
              <el-icon><Paperclip /></el-icon>
              回复信息
            </el-menu-item>
            <el-menu-item index="2-5" @click="router.push('/homepage/myTest')">
              <el-icon><Picture /></el-icon>
              用户测评信息
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><CoffeeCup /></el-icon>
              <span>其他</span>
            </template>
            <el-menu-item index="3-1" @click="router.push('/homepage/heartKnowledge')">
              <el-icon><Reading /></el-icon>
              心理知识
            </el-menu-item>
            <el-menu-item index="3-2" @click="router.push('/homepage/fm')">
              <el-icon><Mug /></el-icon>
              音频及课程
            </el-menu-item>
            <el-menu-item index="3-3" @click="router.push('/homepage/free')">
              <el-icon><Eleme /></el-icon>
              公益信息
            </el-menu-item>
            <el-menu-item index="3-4" @click="router.push('/homepage/publicity')">
              <el-icon><BellFilled /></el-icon>
              公告信息
            </el-menu-item>
            <el-menu-item index="3-5" @click="router.push('/homepage/company')">
              <el-icon><OfficeBuilding /></el-icon>
              公司信息
            </el-menu-item>
            <el-menu-item index="3-6" @click="router.push('/homepage/myNotice')">
              <el-icon><CoffeeCup /></el-icon>
              用户通知
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container :style="{marginLeft:(isFold?'64px':'200px')}">
        <el-header style="background-color: #ffffff;height: 80px;border-bottom: #272424 2px solid">
          <span @click="isFold=!isFold" style="padding: 20px;">
          <el-icon v-if="isFold"><Expand /></el-icon>
          <el-icon v-else><Fold /></el-icon>
          </span>
          <HeaderCom @headerEvent="handleEvent"  />
        </el-header>
        <el-main :style="{backgroundColor:(styleValue?'#fff':'#ddd')}">
          <RouterView/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {RouterView} from "vue-router";
import router from "@/router/index.js";
import HeaderCom from '@/components/header/HeaderCom.vue';
const styleValue = ref(true);

const handleEvent = (value) => {
  // 将接收到的值赋给响应式变量
  styleValue.value = value;
};


let isFold=ref(false)
const isCollapse =isFold;
</script>

<style scoped>
.leftNav{
  background-color: rgba(48, 65, 86);
  height: 752px;
  transition: all .3s;
}
.leftNav::-webkit-scrollbar {width: 0px; height: 0px;}
/* 滚动条滑块（里面小方块） */
.leftNav::-webkit-scrollbar-thumb {border-radius: 10px; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);}
/* 滚动条轨道 */
.leftNav::-webkit-scrollbar-track {border-radius: 0; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.1);}
.switch{
  margin: 20px 0 0 0;
}
</style>